<template>
	<div class="content">
		<el-row class="align_v">
			<el-col :span="2">检查日期</el-col>
			<el-col :span="15">
				<searchDate
					:initTimeDatas="initTimeDatas"
					@getChangeTime="getChangeTime"
				></searchDate
			></el-col>
		</el-row>
		<el-row class="align_v" v-if="departList.length > 1">
			<el-col :span="2">科室</el-col>
			<el-col :span="12"
				><department
					@getdepartcode="getDepartCode"
					:departArray="departList"
				></department
			></el-col>
		</el-row>
		<el-row> </el-row>
		<section v-if="showExam">
			<total-Static
				:dataObj="dataObj1"
				:isExam="true"
				:isShow="false"
			></total-Static>
			<el-row id="c1">
				<stack-barPlot
					:chart-data="chartObj1.data"
					:chartObj="chartObj1"
					key="stackBarPlot1"
					ref="stackBarPlot1"
				></stack-barPlot>
			</el-row>
		</section>
		<section v-if="showImg">
			<total-Static :dataObj="dataObj2"></total-Static>
			<el-row id="c2">
				<stack-barPlot
					:chart-data="chartObj2.data"
					:chartObj="chartObj2"
					key="stackBarPlot2"
					ref="stackBarPlot2"
				></stack-barPlot>
			</el-row>
		</section>
		<section v-if="showFilm">
			<total-Static :dataObj="dataObj3"></total-Static>
			<el-row id="c3">
				<stack-barPlot
					:chart-data="chartObj3.data"
					:chartObj="chartObj3"
					key="stackBarPlot3"
					ref="stackBarPlot3"
				></stack-barPlot>
			</el-row>
		</section>
		<section v-if="showMove">
			<total-Static
				:dataObj="dataObj4"
				:isCheck="true"
				:isExam="false"
				:isShow="false"
			></total-Static>
			<el-row id="c4">
				<stack-barPlot
					:chart-data="chartObj4.data"
					:chartObj="chartObj4"
					key="stackBarPlot4"
					ref="stackBarPlot4"
				></stack-barPlot>
			</el-row>
		</section>
		<section v-if="showLine" id="c5">
			<line-Chart
				:ringObj="ringObj"
				v-if="showLine"
				ref="ringPlot"
			></line-Chart>
		</section>
	</div>
</template>

<script>
import SearchTime from '@/components/common/SearchTime'
import searchDate from '@/components/common/searchDate'
import lineChart from './linechart.vue'
import stackBarPlot from './stackChart.vue'
import totalStatic from './totalstatic.vue'
import { getDate } from "utils/formattime.js"

import {
	get_efficiency,
	get_exam,
	get_image,
	get_film,
	get_check,
	get_depart_list
} from '@/api/data-watch'
import { objSum, compareArray, groupBy } from '@/utils/base.js'
import Department from './Department'

export default {
	name: 'reportQuality',
	components: {
		stackBarPlot,
		SearchTime,
		lineChart,
		totalStatic,
		Department,
		searchDate,
	},
	data () {
		return {
			ringObj: {
				id: 'c5'
			},
			showExam: true,
			showImg: true,
			showFilm: true,
			showMove: true,
			showLine: true,
			departList: [],
			initTimeDatas: [
				{
					text: '昨天',
					code: 'lastDay',
				},
				{
					text: '最近一周',
					code: 'lastOneWeek',
				},
				{
					text: '最近半年',
					code: 'lastHalfYear',
				},
				{
					text: '最近一年',
					code: 'lastOneYear',
				},
			],
			listQuery: {
				start_date: null,
				end_date: null,
				depart_code: null
			},
			chartObj: {
				xField: 'count',
				yField: 'exam_type',
				stackField: 'msg'
			},
			chartObj2: {
				color: [],
				chartId: 'c2',
				data: [] // 数组对象
			},
			chartObj3: {
				color: [ '#91C280', '#729ABA', '#F69999' ],
				chartId: 'c3',
				data: [] // 数组对象
			},
			chartObj4: {
				color: [],
				chartId: 'c4',
				data: [] // 数组对象
			},
			chartObj1: {
				chartId: 'c1',
				data: []
			},
			dataObj1: {
				title: '检查采集',
				data: {
					success: 0,
					incompatible: 0,
					nodata: 0,
					notcoll: 0,
					fail: 0
				}
			},
			dataObj2: {
				title: '影像采集',
				data: {
					success: 0,
					incompatible: 0,
					nodata: 0,
					notcoll: 0,
					fail: 0
				}
			},
			dataObj3: {
				title: '胶片采集',
				data: {
					success: 0,
					incompatible: 0,
					nodata: 0,
					notcoll: 0,
					fail: 0
				}
			},
			dataObj4: {
				title: '影像校对',
				data: {
					success: 0,
					incompatible: 0,
					nodata: 0,
					notcoll: 0,
					fail: 0
				}
			},
			lineData: [],
			totalImg: null,
			totalExam: null,
			totalMove: null,

		}
	},
	computed: {
		scrollerHeight () {
			return `${ ( window.innerHeight - 235 ) / 2 }px`
		}
	},
	created () {
		this.initTime()
		this.getDepartList()
	},
	methods: {
		initTime () {
			let time = getDate( 'lastDay' )
			this.listQuery = Object.assign( this.listQuery, time )
		},
		getDepartCode ( val ) {
			this.listQuery.depart_code = val
			this.getDepartList()
		},
		getAll () {
			this.get_exam()
			this.get_image()
			this.get_film()
			this.get_check()
			this.get_efficiency()
		},
		getChangeTime ( val ) {
			// 获取时间
			this.listQuery = Object.assign( this.listQuery, val )
			this.getDepartList()
		},
		changeShowChart ( $event ) {
			// 切换显示
			this.showChart = true
			this.showList = false
		},
		changeShowList ( $event ) {
			// 切换显示
			this.showList = true
			this.showChart = false
		},
		getDepartList () {
			get_depart_list( this.listQuery ).then( res => {
				if ( res.code === 0 ) {
					if ( res.data.length > 0 ) {
						this.getAll()
					} else {
						this.showExam = false
						this.showImg = false
						this.showMove = false
						this.showFilm = false
						this.showLine = false
					}
					let tempData = [ {
						depart_name: '不限', depart_code: null
					} ]
					this.departList = [ ...tempData, ...res.data ]
				}
			} )
		},
		get_exam () {
			get_exam( this.listQuery ).then( res => {
				if ( res.code === 0 && res.data.length > 0 ) {
					try {
						//　检查采集
						if ( res.data.length > 0 ) {
							this.showExam = true
						} else {
							this.showExam = false
						}
						let data = []
						data = this.formatData( res.data )
						this.chartObj2.data = [ ...data ]
						this.$refs.stackBarPlot1.rePaintChart( data )
						// todo 一个bug 需要修改
						let sum = objSum( data, 'msg' )
						// 求和
						this.dataObj1.data = this.arraySum( res.data )

					} catch {
						console.log( 'error' )
					}
				}
			} )
		},
		get_image () {
			get_image( this.listQuery ).then( res => {
				try {
					// 影像统计
					if ( res.data.length > 0 ) {
						this.showImg = true
					} else {
						this.showImg = false
					}
					let data = []
					data = this.formatData( res.data )
					this.chartObj2.data = [ ...data ]
					this.$refs.stackBarPlot2.rePaintChart( data )
					let sum = objSum( this.formatData( res.data ), '采集成功' )
					console.log( data )
					// 求和
					this.dataObj2.data = this.arraySum( res.data )
				} catch {
					console.log( 'error' )
				}
			} )
		},
		get_film () {
			get_film( this.listQuery ).then( res => {
				try {
					//胶片采集
					if ( res.data.length > 0 ) {
						this.showFilm = true
					} else {
						this.showFilm = false
					}
					let data = []
					data = this.formatData( res.data )
					this.chartObj3.data = [ ...data ]
					this.$refs.stackBarPlot3.rePaintChart( data )
					// 求和
					this.dataObj3.data = this.arraySum( res.data )
				} catch {
					console.log( 'error' )
				}
			} )
		},
		get_check () {
			// 影像校对统计
			get_check( this.listQuery ).then( res => {
				try {
					//　检查采集
					if ( res.data.length > 0 ) {
						this.showMove = true
					} else {
						this.showMove = false
					}
					let data = []
					data = this.formatData( res.data )
					this.chartObj4.data = [ ...data ]
					this.$refs.stackBarPlot4.rePaintChart( data )
					this.dataObj4.data = this.arraySum( res.data )

				} catch {
					console.log( 'error' )
				}
			} )
		},
		get_efficiency () {
			// 获取效率统计图
			get_efficiency( this.listQuery ).then( res => {
				if ( res.code === 0 ) {
					// 绘环形图
					try {
						let data = res.data
						// this.drawLineChart( this.data )
						let tempData = [
							{ time: '0-30min', value: null },
							{ time: '30-120min', value: null },
							{ time: '>120min', value: null },
						]
						tempData[ 0 ].value = res.data.less_than_thirty * 1
						tempData[ 1 ].value = res.data.less_than_one_hundred_twenty * 1
						tempData[ 2 ].value = res.data.more_than_one_hundred_twenty * 1
						this.$refs.ringPlot.rePaintChart( tempData )
					} catch {
						console.log( 'error' )
					}
				}
			} )
		},
		formatData ( Array ) {
      /**
       * 堆积统计图数据格式化
       */
			let chartData = []
			Array.map( item => {
				console.log( item );
				let list = item.collection_list
				if ( list.length > 0 ) {
					if ( item.state == 'successful' ) {
						item.msg = '采集成功'
					}
					if ( item.state == 'unmatched' ) {
						item.msg = '不符合采集'
					}
					if ( item.state == 'failed' ) {
						item.msg = '采集失败'
					}
					if ( item.state == 'nonexistent' ) {
						item.msg = '不存在'
					}
					if ( item.state == 'uncollected' ) {
						item.msg = '未采集'
					}
					if ( item.state == 'unchecked' ) {
						item.msg = '未校对'
					}
				}
				list.forEach( ele => {
					let msg = { msg: item.msg }
					let tempitem = Object.assign( ele, msg )
					// ele[ key ] = item.msg
					// console.log( ele );
					chartData.push( tempitem )
				} )
			} )
			return chartData
		},
		arraySum ( Array ) {
			// todo 分组求和
			let sum = 0
			let data = []
			Array.map( item => {
				let obj = {}
				let list = item.collection_list
				// list.forEach( ele => {
				sum = objSum( list, 'count' )
				obj.state = item.state
				obj.sum = sum.count
				// } )
				data.push( obj )
			} )
			data.map( item => {
				if ( item.state == 'successful' ) {
					item.msg = '采集成功'
				}
				if ( item.state == 'unmatched' ) {
					item.msg = '不符合采集'
				}
				if ( item.state == 'failed' ) {
					item.msg = '采集失败'
				}
				if ( item.state == 'nonexistent' ) {
					item.msg = '不存在'
				}
				if ( item.state == 'uncollected' ) {
					item.msg = '未采集'
				}
				if ( item.state == 'unchecked' ) {
					item.msg = '未校对'
				}
			} )
			// todo 总数汇总
			let total = { msg: '总数', count: 0 }
			total.count = objSum( data, 'count' )
			console.log( total )
			let tempData = []
			return data
		}
	},
	watch: {},
	filter: {}
}
</script>

<style scoped lang="less">
.content {
	.el-col-2 {
		width: 90px;
	}
	padding-left: 20px;
	#tableList > :first-child h2 {
		margin-top: 0;
	}
	.btns {
		position: absolute;
		right: 0;
		top: 145px;
		z-index: 888888;
	}
	i {
		color: #fff;
		opacity: 1;
	}
	h2 {
		height: 25px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 25px;
		margin: 30px 0;
	}
	.item {
		margin: 10px;
		span {
			display: inline-block;
			margin-right: 2.5%;
			font-size: 14px;
		}
		> :nth-child(1) {
			font-size: 18px;
			color: @333;
			font-weight: 500;
		}
		> :nth-child(2) {
			color: @1C8BE4;
		}
		> :nth-child(3) {
			color: @EF8900;
		}
		> :nth-child(4) {
			color: @5660A9;
		}
		> :nth-child(5) {
			color: @333;
		}
	}
	.el-button {
		border: 0px;
	}
	#c5 {
		height: 500px;
	}
	.align_v {
		line-height: 32px;
	}
}
</style>
